<!--
 * @FileDescription: 标绘要素提示标牌
 * @Author: 祝小文
 * @Date: 2022-10-10 09:16
 * @LastEditors: 祝小文
 * @LastEditTime: 2022-10-10 10:25
-->
<script setup lang="ts">
import { useChemicalStore } from '@/store'
const chemicalStore = useChemicalStore()
</script>

<template>
  <div class="tipspage-container">
    您当前标注要素为
    <span class="TipsPage-lx">{{ chemicalStore.currentFactorInfo.name }}</span
    >,

    <!-- 其他要素提示信息 -->
    <div v-if="chemicalStore.currentFactorInfo.type !== 'scrollWall'" class="TipsPage-msg">
      请单击绘制
      <span class="TipsPage-lx">"点"</span>, 并<span class="TipsPage-lx">保存</span>
    </div>

    <!-- 围栏要素提示信息 -->
    <div v-else class="TipsPage-msg">
      请单击绘制多个
      <span class="TipsPage-lx">"点"</span>, 右键结束绘制, 并<span class="TipsPage-lx">保存</span>
    </div>
  </div>
</template>

<style lang="less" scoped>
.tipspage-container {
  position: absolute;
  left: 50%;
  bottom: 50px;
  transform: translateX(-50%);
  width: 723px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 16px;
  background: rgba(1, 7, 17, 0.8);
  border-radius: 20px;
  color: #fff;
  z-index: 1;
  .TipsPage-msg {
    display: inline-block;
  }
  .TipsPage-lx {
    color: rgba(255, 51, 51, 1);
  }
}
</style>
